<template>
<div class="page">
    <!-- 账号登录 -->
    <div>
        <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm" id="image">
            <div class="top">
                <a href="JavaScript:">账号登录</a> |
                <a href="JavaScript:;">手机短信登录</a> |
                <a href="JavaScript:;">微信登录</a>
            </div>

            <el-form-item prop="username" style="padding-top:50px">
                <el-input v-model="ruleForm.username" placeholder="邮箱/账号/手机号"></el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="密码"></el-input>
            </el-form-item>

            <div style="padding-left: 100px; padding-bottom: 20px">
                <el-checkbox></el-checkbox>
                <span style="font-size: 14px; color: gray">下次自动登录</span>
                <a href="JavaScript:;" style="font-size: 14px; color: gray; padding-left:140px">忘记密码?</a>
            </div>
            <el-form-item>
                <el-button type="primary" @click="login()">登录</el-button>
            </el-form-item>
            <div style="padding-left: 280px; padding-bottom: 50px; margin-top:0">
                <a href="JavaScript:;" @click="register()"><span style="font-size: 14px; color: gray">还没有账号？</span><span style="font-size: 14px; color: #32BAF0">去注册</span></a>
            </div>
        </el-form>
    </div>
</div>
</template>

<style>
.page {
    width: 1518px;
    height: 720px;

    margin: 0 auto;
}

.page>div {
    background-image: url(../assets/Login/login-bg2-01.jpg) !important;
    background-repeat: no-repeat !important;
    position: fixed;
}

.page #image {
    margin: 200px 520px;
    background-color: white;
}

.page .top {
    padding: 10px 100px;
}

.page .top a {
    color: black;
}

.page .top a:first-of-type {
    font-size: 25px;
}

.page #image .el-input {
    width: 300px !important;
}

.page #image .el-button {
    width: 300px;
    background-color: rgb(50, 186, 240) !important;
    border-color: rgb(50, 186, 240) !important;
}
</style>

<script>
export default {
    data() {
        return {
            ruleForm: {
                username: "",
                password: ""
            }
        };
    },
    methods: {
        login: function () {
            /* eslint-disable */
            this.$axios.get("http://localhost:8080/user/log_in", {
                    params: {
                        username: this.ruleForm.username,
                        password: this.ruleForm.password
                    }
                }).then(response => {
                    console.log(this.ruleForm.username);
                    console.log(this.ruleForm.password);
                    console.log(response.data);
                    if (response.data === "ok") {
                        sessionStorage.setItem("username", this.ruleForm.username);
                        sessionStorage.setItem("password", this.ruleForm.password);
                        sessionStorage.setItem("status", "ok");
                        this.$message.success("登陆成功");
                        window.location.href = "/index";
                    } else if (response.data === "wrong tel") {
                        this.$message.error("输入的电话号码有误");
                    } else if (response.data === "wrong mail") {
                        this.$message.error("输入的邮箱有误");
                    } else if (response.data === "wrong id") {
                        this.$message.error("输入的用户id有误");
                    } else if (response.data === "wrong password") {
                        this.$message.error("输入的密码有误");
                    }
                })
                .catch(function (error) {
                    // 请求失败处理
                    console.log(error);
                });
        },
        register: function () {
            this.$router.push({ path: "/register" });
        }
    }
};
</script>
